<template>
    <el-form :model="ruleForm" ref="ruleForm" label-position="left" label-width="0px" class="demo-ruleForm login-container">
        <h3 class="title">管理系统</h3>
        <el-form-item prop="account">
            <el-input type="text" v-model.trim="ruleForm.username" auto-complete="off" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
            <el-input type="password" v-model.trim="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item style="width:100%;">
            <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit" :loading="logining">登录</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import {
	userLogin
} from '@/api/api';
export default {
    data: function() {
        return {
            logining: false,
            ruleForm: {
                username: '',
                password: ''
            },
            tips: {
                username: '请输入用户名',
                password: '请输入密码'
            }
        };
    },
    methods: {
        handleSubmit: function() {
        	for(var tip in this.tips){
        		if(!this.ruleForm[tip]){
        			this.$message({
            			type: 'error',
            			message: this.tips[tip]
            		})
            		return;
        		}
        	}
        	userLogin(this.ruleForm).then(data => {
        		console.log(data)
               sessionStorage.setItem('token', JSON.stringify(data.token));
               sessionStorage.setItem('user', JSON.stringify(data.user));
               this.$router.push({
                   path: '/index'
               });
           })
        }
    }
}

</script>
<style scoped>
.login-container {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 15% 0 0 60%;
    ;
    background-color: rgba(238, 238, 238, .5);
    width: 290px;
    padding: 15px 35px;
}

.login-container .title {
    font-size: 20px;
    margin: 10px auto;
    text-align: center;
    color: #363f44;
}

.login-container .remember {
    margin-bottom: 20px;
}

.login-container .copyright {
    font-size: 14px;
    color: #98a6ad;
    text-align: center;
}
</style>
